<template>
  <div>
    <div>
      <el-card>
        <!-- // 面包屑 -->
        <div>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/index' }"
              >首页</el-breadcrumb-item
            >
            <el-breadcrumb-item>基础接口</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <br />

        <!-- // 查询 -->
        <el-form
          :inline="true"
          :model="queryForm"
          class="operation-form"
          size="small"
          ref="SearchForm"
          label-width="80px"
        >
          <el-form-item label="接口名称">
            <el-input
              v-model="queryForm.interfaceName"
              placeholder="请输入接口名称"
              clearable
            ></el-input>
          </el-form-item>

          <el-form-item label="接口状态">
            <el-select
              v-model="queryForm.status"
              placeholder="请选择接口状态"
              clearable
            >
              <el-option
                v-for="item in statusOptions"
                :key="item.lable"
                :value="item.value"
                :label="item.label"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="loadInterface()">查询</el-button>
            <el-button type="success" @click="handleAddInterface()"
              >新增</el-button
            >
          </el-form-item>

          <!-- // 环境变量 -->
          <el-form-item class="config" style="margin-left:100px">
            <el-select
              v-model="currentConfigId"
              placeholder="Environment"
              style="width:200px"
              clearable
              @change="handleChangeConfig"
            >
              <el-option
                v-for="item in configData"
                :key="item.name"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
            <el-button
              icon="el-icon-share"
              circle
              plain
              style="padding-left:10px; border:None;"
              @click="configVisible = true"
            >
            </el-button>
          </el-form-item>
        </el-form>

        <el-container class="tree">
          <el-aside width="168px" style="margin-top:18px">
            <!-- // 左侧操作按钮 -->
            <div class="treeButton">
              <el-button
                circle
                icon="el-icon-circle-plus-outline"
                size="mini"
                type="primary"
                style="margin-left:18px;border:None;"
                @click="handleAddGroup"
              ></el-button>

              <el-button
                icon="el-icon-edit"
                circle
                :disabled="disable"
                type="success"
                size="mini"
                style="margin-left:18px;border:None;"
                @click="handleEditGroup"
              ></el-button>

              <el-button
                icon="el-icon-delete"
                circle
                :disabled="disable"
                type="danger"
                size="mini"
                style="margin-left:18px;border:None;"
                @click="handleDeleteGroup(groupForm.id)"
              ></el-button>

              <br />
              <br />

              <!-- // 左侧分组 -->
              <el-tree
                :data="treeData"
                :props="defaultProps"
                ref="tree"
                accordion
                node-key="id"
                highlight-current
                @node-click="handleNodeClick"
              >
              </el-tree>

              <!-- // 树结构操作弹窗 -->
              <el-dialog
                :title="groupFormTitle"
                :visible.sync="groupFormVisible"
                :modal-append-to-body="false"
                width="450px"
              >
                <el-form inline :model="groupForm" class="tree-form-inline">
                  <el-form-item>
                    <el-input
                      v-model="groupForm.name"
                      placeholder="分组名称尽量保持唯一，方便识别"
                      size="small"
                      style="width:400px"
                      autocomplete="off"
                    >
                      <template slot="prepend">分组名称</template>
                    </el-input>
                  </el-form-item>
                </el-form>

                <div slot="footer" class="tree-footer">
                  <el-button @click="groupFormVisible = false" size="small"
                    >取 消
                  </el-button>
                  <el-button
                    type="primary"
                    @click="submitGroupForm"
                    size="small"
                    >确 定
                  </el-button>
                </div>
              </el-dialog>
            </div>
            <br />
          </el-aside>

          <!-- 表格数据 -->
          <el-container>
            <el-main>
              <el-table
                v-loading="loading"
                border
                size="medium"
                :data="tableData"
                style="width: 100%"
                ref="multipleTable"
                tooltip-effect="dark"
              >
                <el-table-column
                  label="ID"
                  prop="id"
                  width="50"
                ></el-table-column>

                <!-- // 接口类型 -->
                <el-table-column prop="method" label="接口类型" width="100">
                  <template slot-scope="scope">
                    <el-tag
                      :type="interfaceType[scope.row.method]"
                      effect="dark"
                      size="small"
                    >
                      <span>{{ scope.row.method }}</span>
                    </el-tag>
                  </template>
                </el-table-column>

                <el-table-column
                  prop="name"
                  label="接口名称"
                  width="320"
                  show-overflow-tooltip
                >
                </el-table-column>

                <el-table-column
                  prop="url"
                  label="接口地址"
                  show-overflow-tooltip
                >
                </el-table-column>

                <el-table-column
                  prop="status"
                  label="接口状态"
                  width="80"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    <el-tag
                      :type="statusOptions[scope.row.status].type"
                      size="medium"
                    >
                      {{ statusOptions[scope.row.status].label }}
                    </el-tag>
                  </template>
                </el-table-column>

                <el-table-column label="更新人" width="100" prop="updator">
                  <template slot-scope="scope">
                    <el-tag type="primary" effect="plain" size="medium">
                      {{ scope.row.updator }}
                    </el-tag>
                  </template>
                </el-table-column>

                <!-- // 操作按钮 -->
                <el-table-column label="操作" width="300" fixed="right">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="handleEditInterface(scope.row)"
                      type="primary"
                    >
                      编辑
                    </el-button>
                    <el-button
                      size="mini"
                      type=""
                      plain
                      @click="handleCopy(scope.row)"
                    >
                      复制
                    </el-button>
                    <el-button
                      size="mini"
                      type="success"
                      plain
                      @click="runApi(scope.row)"
                    >
                      运行
                    </el-button>
                    <el-button
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.row.id)"
                    >
                      删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <br />

              <!-- 分页 -->
              <el-pagination
                background
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                :page-sizes="[12, 20, 50, 100]"
                :total="pagination.total"
                :page-size="pagination.pageSize"
                :current-page.sync="pagination.page"
                @current-change="loadInterface(pagination.page, groupId)"
              >
              </el-pagination>
            </el-main>
          </el-container>
        </el-container>
      </el-card>

      <!-- // 环境变量操作页面弹窗 -->
      <el-dialog
        title="环境变量"
        :visible.sync="configVisible"
        :modal-append-to-body="false"
        width="1200px"
        center
      >
        <config ref="config" :loading="loading"></config>

        <div slot="footer" class="copy-footer">
          <el-button type="primary" @click="handleCancelConfig" size="small"
            >取 消
          </el-button>
          <el-button
            type="primary"
            :loading="loading"
            @click="handleConfig"
            size="small"
            >确 定
          </el-button>
        </div>
      </el-dialog>

      <!-- // 添加接口弹窗表单 -->
      <el-dialog
        :title="addTitle"
        :visible.sync="addFormVisible"
        :modal-append-to-body="false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :before-close="handlerBeforeClose"
      >
        <div>
          <div>
            <el-form :model="addForm" ref="addForm" class="addFormClass">
              <el-form-item prop="name">
                <!-- 接口名称 -->
                <el-input
                  v-model="addForm.name"
                  placeholder="名称尽量保持其唯一性，方便识别"
                  size="small"
                >
                  <template slot="prepend">接口名称</template>
                </el-input>
              </el-form-item>
              <el-form-item prop="url">
                <!-- // 请求行 -->
                <el-input
                  size="small"
                  v-model="addForm.url"
                  placeholder="http://127.0.0.1:8005/api/manage/interface/"
                >
                  <el-select
                    border
                    v-model="addForm.method"
                    size="small"
                    style="width:91.5px;"
                    slot="prepend"
                  >
                    <el-option
                      v-for="item in methodOptions"
                      :key="item.label"
                      :label="item.label"
                      :value="item.label"
                    >
                    </el-option>
                  </el-select>
                </el-input>
              </el-form-item>
            </el-form>
          </div>
          <!-- // 请求数据 -->
          <div class="request" v-if="addFormVisible">
            <el-tabs v-model="activeName">
              <el-tab-pane label="请求头" name="first">
                <request-headers
                  ref="headers"
                  :headers="addForm.request_items.headers"
                ></request-headers>
              </el-tab-pane>

              <!-- // 请求参数 -->
              <el-tab-pane label="请求参数" name="second">
                <request-body
                  ref="body"
                  :request="addForm.request_items.request"
                ></request-body>
              </el-tab-pane>

              <!-- // 提取表单 -->
              <el-tab-pane label="响应提取" name="third">
                <response-extract
                  ref="extract"
                  :extract="addForm.request_items.extract"
                ></response-extract>
              </el-tab-pane>

              <!-- // 断言表单 -->
              <el-tab-pane label="响应断言" name="fourth">
                <response-validate
                  ref="validate"
                  :validate="addForm.request_items.validate"
                ></response-validate>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>

        <div slot="footer" class="add-footer">
          <el-button @click="handleCancel" size="small">取 消 </el-button>
          <el-button type="primary" @click="sumbmitInterfaceForm" size="small"
            >确 定
          </el-button>
        </div>
      </el-dialog>

      <!-- // 复制接口弹窗表单 -->
      <el-dialog
        :title="copyTitle"
        :visible.sync="copyFormVisible"
        :modal-append-to-body="false"
        width="450px"
      >
        <el-form inline :model="copyForm" class="copy-form-inline">
          <el-form-item>
            <el-input
              v-model="copyForm.name"
              placeholder="名称尽量保持其唯一性，方便识别"
              size="small"
              style="width:400px"
            >
              <template slot="prepend">接口名称</template>
            </el-input>
          </el-form-item>
        </el-form>

        <div slot="footer" class="border">
          <el-button @click="copyFormVisible = false" size="small"
            >取 消
          </el-button>
          <el-button type="primary" @click="submitCopyForm()" size="small"
            >确 定
          </el-button>
        </div>
      </el-dialog>

      <!-- // 运行接口结果弹窗 -->
      <el-dialog
        :visible.sync="reportVisible"
        :modal-append-to-body="false"
        width="1500px"
        center
        :loading="loading"
        :close-on-click-modal="false"
      >
        <report :result="result"></report>

        <div slot="footer" class="copy-footer">
          <el-button type="primary" @click="handleCencelReport" size="small"
            >确 定
          </el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  queryInterface,
  addInterface,
  deleteInterface,
  updateInterface,
  copyInterface,
  updateStatus
} from "@/api/interface";
import { queryGroup, addGroup, deleteGroup, updateGroup } from "@/api/group";
import { queryConfig, setDefault } from "@/api/config";
import { runApi } from "@/api/run";
import Config from "./components/config";
import RequestHeaders from "./components/header";
import RequestBody from "./components/body";
import ResponseExtract from "./components/extract";
import ResponseValidate from "./components/validate";
import Report from "./components/report";

export default {
  name: "",
  props: {},
  components: {
    RequestHeaders,
    RequestBody,
    ResponseExtract,
    ResponseValidate,
    Config,
    Report
  },
  data() {
    return {
      // 【查询表单属性】
      queryForm: {
        interfaceName: undefined,
        status: undefined
      },

      // 请求方法选项
      methodOptions: [
        {
          label: "GET"
        },
        {
          label: "POST"
        },
        {
          label: "PATCH"
        },
        {
          label: "DELETE"
        },
        {
          label: "PUT"
        },
        {
          label: "OPTIONS"
        },
        {
          label: "HEADE"
        }
      ],

      // 接口状态标签
      statusOptions: [
        {
          label: "失败",
          value: "0",
          type: "danger"
        },
        {
          label: "成功",
          value: "1",
          type: "success"
        },
        {
          label: "未知",
          value: "2",
          type: "primary"
        }
      ],

      // 接口请求颜色标签
      interfaceType: {
        POST: "success",
        DELETE: "danger",
        PATCH: "info",
        GET: "primary",
        PUT: "warning",
        OPTIONS: "primary",
        HEAD: "success"
      },

      // 【分页属性】
      pagination: {
        total: 0,
        page: 1,
        pageSize: 12
      },

      activeName: "first",
      projectId: parseInt(window.localStorage.getItem("projectId")),

      // 表格数据
      tableData: [],
      loading: false,

      // 【分组数据】
      treeData: [],
      children: undefined,
      defaultProps: {
        children: "children",
        label: "label"
      },
      // 新增分组弹窗
      isEdit: false,
      disable: true,
      groupFormTitle: "",
      groupFormVisible: false,
      groupForm: {
        name: "",
        project_id: parseInt(window.localStorage.getItem("projectId")),
        pid: 0
      },

      // 【添加表单弹窗】
      addTitle: "",
      addFormVisible: false,
      initData: {
        request_items: {
          headers: [],
          extract: [],
          validate: [],
          request: {}
        },
        url: "",
        method: "GET",
        name: "",
        project_id: this.projectId
      },

      addForm: {
        request_items: {
          headers: [],
          extract: [],
          validate: [],
          request: {}
        },
        url: "",
        method: "GET",
        name: "",
        project_id: this.projectId
      },

      // 【复制接口表单弹窗】
      copyTitle: "复制接口",
      copyFormVisible: false,
      copyForm: {
        name: null
      },

      groupId: undefined,

      // 【运行接口结果弹窗】
      reportVisible: false,
      result: {},
      runTestcaseForm: {
        project_id: this.projectId,
        id: null,
        config_id: undefined
      },

      // 【环境变量操作弹窗】
      currentConfigId: "",
      configVisible: false,
      configData: [],
      configLoading: false
    };
  },
  computed: {},
  watch: {},
  created() {
    this.loadInterface();
    this.loadGroup();
    this.loadConfig();
  },
  mounted() {},
  methods: {
    loadConfig() {
      queryConfig({
        project_id: this.projectId
      })
        .then(res => {
          var result = res.data.result;
          this.configData = result;
          for (var item of result) {
            if (item.is_default === true) {
              this.currentConfigId = item.id;
            }
          }
        })
        .catch(err => {
          console.log("错误信息：" + err);
        });
    },

    // 设置默认环境变量
    handleChangeConfig() {
      setDefault({
        project_id: this.projectId,
        id: this.currentConfigId
      })
        .then(res => {
          if (res.data.code == 200) {
            this.$message.success("环境变量设置成功");
          } else {
            this.$message.error("环境变量设置失败" + err);
          }
        })
        .catch(err => {
          this.$message.error("错误消息：" + err);
        });
      this.runTestcaseForm.config_id = this.currentConfigId;
    },

    // 加载用例分组数据
    loadGroup() {
      this.disable = true;
      queryGroup({
        project_id: parseInt(window.localStorage.getItem("projectId")),
        page_size: 30
      })
        .then(res => {
          const result = res.data.result;
          this.treeData = result;
          this.getListData();
        })
        .catch(err => {
          console.log("错误消息：" + err);
        });
    },

    // tree树结构点击节点回调事件
    handleNodeClick(data, node) {
      this.groupForm.id = data.id;
      this.groupForm.pid = data.pid;
      this.groupForm.name = data.label;

      this.currentGroupName = data.label;
      this.addForm.group_id = data.id;

      this.children = node.childNodes;

      if (data.id === 0) {
        this.groupId = undefined;
      } else {
        this.groupId = data.id;
      }

      this.disable = true;
      if (data.label !== "默认分组") {
        this.disable = false;
      }
      this.loadInterface(1, this.groupId);
    },

    // 点击新增分组事件
    handleAddGroup() {
      this.groupFormVisible = true;
      this.isEdit = false;
      this.groupFormTitle = "新增分组";
      this.groupForm.name = "";
    },

    // 点击编辑分组事件
    handleEditGroup() {
      this.groupForm.name = this.currentGroupName;
      this.groupFormVisible = true;
      this.groupFormTitle = "编辑分组";
      this.isEdit = true;
    },

    // 添加分组接口
    addGroup() {
      if (!this.groupForm.id) {
        this.groupForm.pid = 0;
      } else {
        this.groupForm.pid = this.groupForm.id;
        this.groupForm.id = undefined;
      }
      addGroup(this.groupForm)
        .then(res => {
          if (res.data.code === 200) {
            this.$message({
              type: "success",
              message: "新增成功"
            });
          } else {
            this.$message.error("新增失败: " + res.data.msg);
          }
          this.loadGroup();
        })
        .catch(err => {
          this.$message.error("新增失败: " + err);
        });
    },

    // 更新分组接口
    updateGroup() {
      updateGroup(this.groupForm)
        .then(res => {
          if (res.data.code === 200) {
            this.$message({
              type: "success",
              message: "编辑成功"
            });
          } else {
            this.$message.error("编辑失败: " + res.data.msg);
          }
          this.loadGroup();
        })
        .catch(err => {
          this.$message.error("编辑失败: " + err);
        });
    },

    //  提交分组表单
    submitGroupForm() {
      if (!this.isEdit) {
        this.addGroup();
      } else {
        this.updateGroup();
      }
      this.groupFormVisible = false;
    },

    // 删除分组
    handleDeleteGroup(id) {
      if (this.children.length !== 0) {
        this.$message.error("此节点有子级，不可删除！");
        return false;
      } else {
        this.$confirm("是否删除此节点?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            deleteGroup({ id }).then(res => {
              this.$message({
                type: "success",
                message: "删除成功"
              });
              // 删除成功后，更新当前页的数据列表
            });
            this.loadGroup();
          })
          .catch(err => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      }
    },

    handleSizeChange(size) {
      this.pagination.pageSize = size;
      this.loadInterface();
    },

    // 查询接口表格数据
    loadInterface(page = 1, group_id = undefined) {
      this.loading = true;
      queryInterface({
        page: page,
        page_size: this.pagination.pageSize,
        name: this.queryForm.interfaceName,
        status: this.queryForm.status,
        project_id: parseInt(window.localStorage.getItem("projectId")),
        group_id: group_id
      })
        .then(res => {
          let resData = res.data;
          if (resData.code == 200) {
            this.tableData = resData.result;
            this.pagination.total = resData.total;
          } else {
            this.$message.error("加载接口数据失败： " + res.data.msg);
          }
          this.loading = false;
        })
        .catch(err => {
          console.log("错误消息：" + err);
        });
    },

    // 添加接口操作
    handleAddInterface() {
      this.addTitle = "新增接口";
      this.addFormVisible = true;
      this.groupId = undefined;
      this.isEdit = false;
      this.addForm.id = undefined;
      this.addForm.url = "";
      this.addForm.method = "GET";
      this.addForm.name = "";
      this.addForm.project_id = this.projectId;
      this.addForm.request_items = {};
    },

    // 编辑接口操作
    handleEditInterface(row) {
      this.activeName = "first";
      this.addTitle = "编辑接口";
      this.addFormVisible = true;
      this.isEdit = true;
      this.addForm.id = row.id;
      this.addForm.project_id = this.projectId;
      this.addForm.name = row.name;
      this.addForm.url = row.url;
      this.addForm.method = row.method;
      this.addForm.request_items = row.request_items;
    },

    // 调用新增接口
    addInterface() {
      console.log(this.addForm);
      addInterface(this.addForm)
        .then(res => {
          if (res.data.code === 200) {
            this.$message({
              type: "success",
              message: "新增接口成功"
            });
            this.addFormVisible = false;
            this.loadInterface(this.pagination.page, this.groupId);
          } else {
            this.$message.error("新增接口成功" + res.data.msg);
          }
        })
        .catch(err => {
          this.$message.error("错误消息: " + err);
        });
    },

    // 调用编辑接口
    editInterface() {
      updateInterface(this.addForm)
        .then(res => {
          if (res.data.code === 200) {
            this.$message({
              type: "success",
              message: "编辑接口成功"
            });
            this.addFormVisible = false;
            this.loadInterface(this.pagination.page, this.groupId);
          } else {
            this.$message.error("编辑失败：" + res.data.msg);
          }
        })
        .catch(err => {
          this.$message.error("错误消息: " + err);
        });
    },

    // 新增/编辑提交表单事件
    sumbmitInterfaceForm() {
      this.prepareData(); // 获取数据

      if (!this.isEdit) {
        this.addInterface();
      } else {
        this.editInterface();
      }
    },

    // 加载接口弹窗的所有数据
    prepareData() {
      let headerData = this.$refs.headers.emitHeaders();
      if (headerData[0].key !== "") {
        this.addForm.request_items.headers = headerData;
      } else {
        this.addForm.request_items.headers = undefined;
      }

      let requestData = this.$refs.body.emitBody();
      this.addForm.request_items.request = requestData;

      let extractData = this.$refs.extract.emitExtract();
      if (extractData[0].key !== "") {
        this.addForm.request_items.extract = extractData;
      } else {
        this.addForm.request_items.extract = undefined;
      }

      let validateData = this.$refs.validate.emitValidate();
      if (validateData[0].expression !== "") {
        this.addForm.request_items.validate = validateData;
      } else {
        this.addForm.request_items.validate = undefined;
      }
    },

    // 复制接口
    handleCopy(row) {
      this.copyFormVisible = true;
      this.copyForm.name = row.name + " Copy";
      this.copyForm.id = row.id;
    },

    // 复制弹窗确定按钮事件
    submitCopyForm() {
      copyInterface(this.copyForm)
        .then(res => {
          if (res.data.code === 200) {
            this.$message({ type: "success", message: "复制成功" });
            this.loadInterface(this.pagination.page, this.groupId);
          } else {
            this.$message.error(res.data.msg);
          }
          this.copyFormVisible = false;
        })
        .catch(err => {
          this.$message.error(res.data.msg);
          console.log("错误信息：" + err);
        });
    },

    // 运行接口
    runApi(row) {
      // project_id和config_id已经被赋值
      this.runTestcaseForm.id = row.id;
      this.runTestcaseForm.config_id = this.currentConfigId;
      this.runTestcaseForm.project_id = this.projectId;
      runApi(this.runTestcaseForm)
        .then(res => {
          let result = res.data.result;
          if (res.data.code == 200) {
            this.result = result;
            this.result.status = result.success;
            this.result.interfaceName = result.details[0].name;
            this.reportVisible = true;
            this.loadInterface(this.pagination.page, this.groupId);
          } else {
            this.$message.error("运行失败: " + res.data.msg);
          }
        })
        .catch(err => {
          console.log("错误信息：" + err);
        });
      this.loading = false;
    },

    // 删除接口方法
    handleDelete(id) {
      {
        this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            deleteInterface({ id }).then(res => {
              if (res.data.code === 200) {
                this.$message({ type: "success", message: "删除成功" });
              } else {
                this.$message.error(res.data.msg);
              }
              this.loadInterface(this.pagination.page, this.groupId);
            });
          })
          .catch(err => {
            console.log("错误消息：" + err);
          });
      }
    },

    // 环境变量确定按钮事件
    handleConfig() {
      this.configVisible = false;
      this.$refs.config.emitConfig();
    },

    handlerBeforeClose(done = () => {}) {
      this.$refs["addForm"].resetFields();
      this.$refs["body"].initData();
      this.$refs["headers"].initData();
      this.$refs["validate"].initData();
      this.$refs["extract"].initData();
      done();
    },

    handleCencelReport() {
      this.reportVisible = false;
      this.loadInterface(this.pagination.page, this.groupId);
    },

    handleCancel() {
      this.handlerBeforeClose();
      this.addFormVisible = false;
    },

    handleCancelConfig() {
      this.configVisible = false;
      this.$refs.config.loadTableData();
    },

    // 解析tree数据
    getListData() {
      let dataArray = [];
      this.treeData.forEach(function(data) {
        let pid = data.pid;
        if (pid == 0) {
          let objTemp = {
            id: data.id,
            label: data.name,
            pid: pid
          };
          dataArray.push(objTemp);
        }
      });
      this.data2treeDG(this.treeData, dataArray);
      dataArray.unshift({
        id: 0,
        label: "默认分组",
        pid: 0
      });
    },

    // 解析children数据
    data2treeDG(treeData, dataArray) {
      for (let j = 0; j < dataArray.length; j++) {
        let dataArrayIndex = dataArray[j];
        let childrenArray = [];
        let Id = dataArrayIndex.id;
        for (let i = 0; i < treeData.length; i++) {
          let data = treeData[i];
          let pid = data.pid;
          if (pid == Id) {
            //判断是否为儿子节点
            let objTemp = {
              id: data.id,
              label: data.name,
              pid: pid
            };
            childrenArray.push(objTemp);
          }
        }
        if (childrenArray.length > 0) {
          dataArrayIndex.children = childrenArray;
        }
        if (childrenArray.length > 0) {
          //有儿子节点则递归
          this.data2treeDG(treeData, childrenArray);
        }
      }
      this.treeData = dataArray;
      return dataArray;
    },

    // 编写日期格式化方法
    dateFormat: function(row, column) {
      const date = row[column.property];
      if (date === undefined) {
        return "";
      }
      // 这里的格式根据需求修改
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    }
  }
};
</script>

<style lang="less">
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 0px;
}

.el-tabs__item {
  color: pink;
}

.el-table .success-row {
  border-color: #ecfaf4;
  border-radius: 30px;
}

.config {
  .el-icon-s-operation {
    height: 100px;
    width: auto;
    padding-left: 10px;
  }
}
</style>
